<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频识别系统</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet/dist/leaflet.css" />
    <style>
        #map {
            height: 500px;
        }
        #video-container {
            display: flex;
            align-items: center;
        }
        #video {
            width: 50%;
        }
        #results {
            width: 50%;
            padding: 10px;
            border-left: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <h1>视频识别系统</h1>
    <input type="file" id="video-file" accept="video/*">
    <div id="video-container">
        <video id="video" controls></video>
        <div id="results">
            <h3>识别结果</h3>
            <ul id="result-list"></ul>
        </div>
    </div>
    <div id="map"></div>

    <script src="https://cdn.jsdelivr.net/npm/leaflet/dist/leaflet.js"></script>
    <script>
        document.getElementById('video-file').addEventListener('change', function(event) {
            const file = event.target.files[0];
            if (file) {
                const formData = new FormData();
                formData.append('video', file);

                fetch('/upload', {
                    method: 'POST',
                    body: formData
                })
                .then(response => response.json())
                .then(data => {
                    console.log('识别完成，结果已保存');
                    // 加载视频和识别结果
                    loadVideo(data.videoUrl, data.results);
                });
            }
        });

        function loadVideo(videoUrl, results) {
            const video = document.getElementById('video');
            video.src = videoUrl;
            video.load();

            const resultList = document.getElementById('result-list');
            resultList.innerHTML = '';
            results.forEach(result => {
                const li = document.createElement('li');
                li.textContent = `时间: ${result.time}, 结果: ${result.result}`;
                resultList.appendChild(li);
            });

            // 初始化地图
            const map = L.map('map').setView([51.505, -0.09], 13);
            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
            }).addTo(map);

            // 添加标记
            results.forEach(result => {
                if (result.latitude && result.longitude) {
                    L.marker([result.latitude, result.longitude])
                        .addTo(map)
                        .bindPopup(`时间: ${result.time}<br>结果: ${result.result}`)
                        .on('click', () => {
                            video.currentTime = result.time;
                        });
                }
            });
        }
    </script>
</body>
</html>